<template>
    <el-table
      :data="tableData"
      border
      style="width: 55%; margin: 20px ;border-radius: 8px;box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);"
      :header-cell-style="{
          'background': '#337ecc !important',
          'color': '#ffffff',
          'border': 'none !important'
        }">
      <el-table-column prop="name" label="计件项目"></el-table-column>  
      <el-table-column prop="workOrder" label="数量" width="300" />
      <el-table-column prop="quality" label="质量/%" width="300" />
    </el-table>
    <div style="margin: 0px 0px 0px 25px;">总计：{{total}}项</div>
</template>

<script setup>
import {ref, onBeforeMount, reactive,getCurrentInstance} from "vue";
import {getOnePieceList}from '@/api/empPiece'
import { ElMessage } from 'element-plus'

const props = defineProps({
  empId: {
    type: String,
    required: true, //是否规定必须得有
  },
  update: {
    type: Function,
    default: () => {},
  },
  thirdId:{
    type:Number,
    required:true
  },
  positionId: {
    type: String,
    required: true, //是否规定必须得有
  }
}) 

const total=ref()
const Form = reactive([])
const tableData=ref([])
onBeforeMount(()=>{
  let empId=props.empId
  let positionId=props.positionId
    getOnePieceList({positionId,empId})
    .then(data=>{
        tableData.value=data.data;
        total.value=tableData.value.length
    });
})


</script>
<style lang="scss" scoped>

.formWrapper{
    width: 100%;
    border: 2px solid #DCDFE6;
    margin: 20px 0;
    border-radius: 5px;
    .formTitle{
        height: 50px;
        font-weight: bold;
        color: #303133;
        font-size: 25px;
        text-align: center;
        line-height: 50px;
        border-bottom: #DCDFE6 1px solid;
    }

    .form{
        width: 1200px;
        margin: 20px auto;
        border-radius: 5px;
        .title {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;/* 替代space-between布局方式 */
            .title_box{
                width: 200px;
                flex: 1;
                height: 50px;
                background-color: #337ECC;
                text-align: center;
                color: #fff;
                line-height: 50px;
                font-size: 20px;
            }
        }
        .centent {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;/* 替代space-between布局方式 */
            .centent_box{
                width: 200px;
                flex: 1;
                height: 50px;
                background-color: #79bbff;
                color: #fff;
                padding: 5px;
                line-height: 40px;
                text-align: center;
            }
        }
    }
    .button{
        width: 200px;
        height: 40px;
        margin: 10px auto;
        float: right;
    }
}
</style>
